define('admin/js/mod/user/ListCredit', [
    'utils/fetchEnhancer',
    'utils/helpers'], (fetch, helpers) => {

const UserListCredit = {
    data: function() {
        return {
            editDialogVisible: false,
            formData: {},
            list: null,
            total: 0,
            pageSize: 10,
            current: 1
        }
    },
    methods: {
        fetchList: function(page) {
            let _self = this;

            fetch('/adminapi/listusercredit?page=' + page).then(function(json){
                if(0 === json.status) {
                    _self.total = parseInt(json.data.total, 10);
                    _self.pageSize = parseInt(json.data.page_size, 10);
                    _self.current = parseInt(json.data.current, 10);
                    _self.list = json.data.data;
                }
            });
        },
        pageChange: function(p) {
            this.fetchList(p);
        },
        handleTableClick: function(e) {
            let _self = this;
            let t = e.target;
            let role = t.getAttribute('data-role');
            let id = t.getAttribute('data-id');

            if('edit' === role) {
                fetch('/adminapi/getusercredit?id=' + id).then(function(json){
                    if(0 === json.status) {
                        _self.formData = json.data.data,
                        _self.editDialogVisible = true;
                    }
                });
                return;
            }
        },
        doAddOrEdit: function() {
            let _self = this;
            let ret = helpers.json2Query(this.formData);
            let url = '/adminapi/editusercredit';

            fetch(url, {
                method: 'POST',
                body: ret
            }).then(function(json){
                if(0 === json.status) {
                    _self.formData = {},
                    _self.editDialogVisible = false;
                    _self.fetchList(_self.current);

                    _self.$message.success('操作成功');
                } else {
                    _self.$message.error('操作失败');
                }
            });
        }
    },
    mounted: function() {
        this.fetchList(1);
    },
    template:
`<div>
    <table class="x-table" @click="handleTableClick">
        <tr>
            <th>uid</th>
            <th>金钱</th>
            <th>积分</th>
            <th>经验</th>
            <th>操作</th>
        </tr>
        <template v-if="list && list.length">
            <tr v-for="item in list">
                <td>{{ item.uid }}</td>
                <td>{{ item.money }}</td>
                <td>{{ item.score }}</td>
                <td>{{ item.experience }}</td>
                <td>
                    <span class="x-table-cursor-text" data-role="edit" :data-id="item.id">修改</span>
                </td>
            </tr>
        </template>
    </table>

    <div style="margin-top: 10px; text-align: right">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChange"
            :current-page="current"
            :page-size="pageSize"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog title="修改" :visible.sync="editDialogVisible">
        <el-form :model="formData">
            <el-form-item label="id" label-width="100px">
                <el-input :disabled="true" v-model="formData.id"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.uid" label="uid" label-width="100px">
                <el-input :disabled="true" v-model="formData.uid"></el-input>
            </el-form-item>
            <el-form-item label="金钱" label-width="100px">
                <el-input v-model="formData.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="积分" label-width="100px">
                <el-input v-model="formData.score" maxlength="20" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经验" label-width="100px">
                <el-input v-model="formData.experience" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="editDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="doAddOrEdit">确定</el-button>
        </div>
    </el-dialog>
</div>`
};

return UserListCredit;

});
